import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class Footer extends Component {
  
    componentDidMount(){
        console.log('footer this.props',this.props);
    }
    render() {
        return (
            <div id="footer">
              <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selected={sessionStorage.getItem("selectedTab")=== 'home'}
            badge={1}
            onPress={() => {
              sessionStorage.setItem("selectedTab","home")

              this.props.history.push('/home')
            }}
            
          >
          
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="火车票"
            key="train"
            badge={'new'}
            selected={sessionStorage.getItem("selectedTab") === 'train'}
            onPress={() => {
              sessionStorage.setItem("selectedTab","train");
              this.props.history.push('/list')
            }}
           
          >
        
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="订单"
            key="order"
            dot
            selected={sessionStorage.getItem("selectedTab") === 'order'}
            onPress={() => {
             sessionStorage.setItem('selectedItem','order');
              this.props.history.push('/order')
            }}
          >
          
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
            selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
            title="我的"
            key="my"
            selected={sessionStorage.getItem("selectedTab") === 'my'}
            onPress={() => {
              sessionStorage.setItem('selectedTab','my')
              this.props.history.push('/my')
            }}
          >
          
          </TabBar.Item>
        </TabBar>  
            </div>
        );
    }
}

export default Footer;